<template>
    <div class="min-h-screen bg-gray-50" >
      <div class="flex">
        <!-- 右侧内容区 -->
      <div class="flex-1 p-8">
        <!-- 个人信息 -->
        <div
          v-if="currentTab === 'profile'"
          class="bg-white rounded-lg shadow-sm p-8"
        >
          <div class="flex gap-8">
            <div class="flex-1">
              <h2 class="text-2xl font-bold mb-6">个人信息</h2>
              <el-form :model="profileForm" label-width="100px">
                <el-form-item label="头像">
                  <div class="flex items-center gap-4">
                    <el-upload
                      class="avatar-uploader"
                      action="#"
                      :show-file-list="false"
                      :before-upload="beforeAvatarUpload"
                      :auto-upload="false"
                    >
                      <img
                        :src="profileForm.avatar"
                        alt="avatar"
                        class="w-20 h-20 rounded-full object-cover cursor-pointer hover:opacity-80 transition-opacity"
                      />
                    </el-upload>
                  </div>
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input
                    v-model="profileForm.name"
                    placeholder="请输入姓名"
                  />
                </el-form-item>
                <el-form-item label="职位">
                  <el-input
                    v-model="profileForm.title"
                    placeholder="请输入职位"
                  />
                </el-form-item>
                <el-form-item label="公司">
                  <el-input
                    v-model="profileForm.company"
                    placeholder="请输入公司"
                  />
                </el-form-item>
                <el-form-item label="电话">
                  <el-input
                    v-model="profileForm.phone"
                    placeholder="请输入电话"
                  />
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input
                    v-model="profileForm.email"
                    placeholder="请输入邮箱"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    class="!rounded-button whitespace-nowrap"
                    @click="saveProfile"
                    >保存修改</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <div class="w-[500px]">
              <img
                src="https://ai-public.mastergo.com/ai/img_res/3666e153f59c88b1345871e21b56763e.jpg"
                alt="office"
                class="w-full h-[450px] object-cover rounded-lg"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import {
  Search,
  View,
  User,
  Edit,
  SwitchButton,
  ArrowDown,
  Message,
  ChatDotSquare,
  Delete,
  Briefcase,
} from "@element-plus/icons-vue";
import * as echarts from "echarts";
import type { EChartOption } from "echarts";
import { ElMessage } from "element-plus";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper/modules";
const swiperModules = [Pagination, Autoplay];
const education = ref("");
const skill = ref("");
const dialogVisible = ref(false);
const selectedTalent = ref<any>(null);
const chartRefs = ref<HTMLElement[]>([]);
const detailChartRef = ref<HTMLElement>();

const currentTab = ref("profile");
const profileForm = ref({
  name: "王总监",
  title: "科技招聘总监",
  company: "未来科技有限公司",
  phone: "13800138000",
  email: "wang@future-tech.com",
  avatar:
    "https://ai-public.mastergo.com/ai/img_res/f181576e695dad80f53211028b3b7813.jpg",
});
const beforeAvatarUpload = (file: File) => {
  const isImage = file.type.startsWith("image/");
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isImage) {
    ElMessage.error("头像只能是图片格式!");
    return false;
  }
  if (!isLt2M) {
    ElMessage.error("头像大小不能超过 2MB!");
    return false;
  }
  // 创建一个本地预览URL
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (e) => {
    if (e.target?.result) {
      profileForm.value.avatar = e.target.result as string;
    }
  };
  return false;
};
const saveProfile = () => {
  ElMessage({
    message: "个人信息修改成功！",
    type: "success",
  });
};
</script>

<style scoped>

.mail-item {
  border: 1px solid #ccc; /* 自定义边框颜色 */
  transition: background-color 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
}

.mail-item:hover {
  background-color: #add8e6; /* 自定义悬停背景颜色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 自定义悬停阴影 */
}

.inbox-container {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 自定义阴影效果 */
  padding: 2rem;
}

</style>
